import 'dart:ui';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_demo/core/common/model/creative_model.dart';
import 'package:flutter_demo/core/common/model/ui_element_model.dart';
import 'package:flutter_demo/core/common/utils/image_utils.dart';
import 'package:flutter_demo/core/common/values/gaps.dart';
import 'package:flutter_demo/core/common/values/server.dart';
import 'package:flutter_demo/ui/pages/composite/widgets/play_list/custom_tap.dart';
import 'package:flutter_demo/ui/pages/composite/widgets/play_list/element_title_widget.dart';
import 'package:flutter_demo/ui/pages/composite/widgets/play_list/found_ver_scroll_playlist.dart';
import 'package:flutter_demo/ui/pages/composite/widgets/play_list/playcount_widget.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:keframe/keframe.dart';

// import 'package:palette_generator/palette_generator.dart';

class FoundSliedPlaylist extends StatelessWidget {
  final UiElementModel uiElementModel;
  final List<CreativeModel> creatives;
  final int curIndex;
  final double itemHeight;

  const FoundSliedPlaylist(
      {super.key,
      required this.uiElementModel,
      required this.creatives,
      required this.curIndex,
      required this.itemHeight});

  Widget _buildItem(CreativeModel model, ThemeData thme) {
    if (GetUtils.isNullOrBlank(model.resources) == true) return Gaps.empty;
    if (model.creativeType == 'scroll_playlist') {
      //垂直滚动的歌单卡片
      return FoundVerScrollPlayList(
        resources: model.resources!,
      );
    } else {
      final resource = model.resources![0];
      final extInfo = resource.resourceExtInfo;
      return SizedBox(
        width: 109.w,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            //突出的背景
            Container(
              height: 1.h,
              margin: EdgeInsets.only(left: 12.w, right: 12.w),
              decoration: BoxDecoration(
                color: Colors.grey.shade300.withOpacity(0.4),
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(12.r),
                    topRight: Radius.circular(12.r)),
              ),
            ),
            //图片
            ClipRRect(
              borderRadius: BorderRadius.circular(10.r),
              child: CachedNetworkImage(
                width: 100.w,
                height: 105.h,
                placeholder: (context, url) {
                  return Container(
                    color: const Color(0xFFFFFFFF).withOpacity(0.5),
                  );
                },
                imageUrl: resource.uiElement?.image?.imageUrl ?? "",
                imageBuilder: (image, provider) {
                  return Stack(
                    children: [
                      Image(
                        image: provider,
                        fit: BoxFit.cover,
                      ),
                      //额外的样式 播放量等
                      _buildExtWidget(extInfo, provider),
                    ],
                  );
                },
              ),
            ),

            Gaps.vGap5,
            //标题
            Text(
              resource.uiElement?.mainTitle?.title ?? "",
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
              style: const TextStyle(),
            )
          ],
        ),
      );
    }
  }

  Widget _buildExtWidget(ResourceExtInfoModel extInfo, ImageProvider provider) {
    switch (extInfo.specialType) {
      case 200:
        // 封面渐变
        return Positioned.fill(
            child: Stack(
          children: [
            //模糊背景
            BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
              child: Container(),
            ),

            //播放量 不需要背景
            _buildPlaycountWidget(extInfo.playCount!, provider, needBg: false),

            Center(
              child: Stack(
                children: [
                  ClipRRect(
                    borderRadius: BorderRadius.circular(5.r),
                    child: Image(
                      image: provider,
                      width: 90.w,
                      height: 64.h,
                      fit: BoxFit.cover,
                    ),
                  ),
                  Image.asset(
                    ImageUtils.getImagePath('d7o'),
                    width: 90.w,
                    height: 64.h,
                    fit: BoxFit.fill,
                  )
                ],
              ),
            )
          ],
        ));
    }
    //只有播放量
    return _buildPlaycountWidget(extInfo.playCount!, provider);
  }

  Widget _buildPlaycountWidget(int count, ImageProvider<Object> provider,
      {bool needBg = true}) {
    if (needBg) {
      return Positioned(
          right: 4.w,
          top: 4.w,
          //裁剪器
          child: ClipRRect(
            borderRadius: BorderRadius.all(
              Radius.circular(8.r),
            ),
            child: PlayCountWidget(
              playCount: count,
              needBg: needBg,
            ),
          ));
    } else {
      return Positioned(
          right: 4.w,
          top: 4.w,
          child: Container(
            padding: EdgeInsets.only(left: 7.w, right: 7.w),
            height: 16.h,
            child: PlayCountWidget(
              playCount: count,
              needBg: needBg,
            ),
          ));
    }
  }

  @override
  Widget build(BuildContext context) {
    final thme = Get.theme;
    return Container(
        decoration: BoxDecoration(
            color: thme.cardColor,
            borderRadius: BorderRadius.only(
                //第三个item 上边的圆角保留
                topLeft: curIndex == 2
                    ? const Radius.circular(0)
                    : Radius.circular(10.r),
                topRight: curIndex == 2
                    ? const Radius.circular(0)
                    : Radius.circular(10.r),
                bottomLeft: Radius.circular(10.h),
                bottomRight: Radius.circular(10.h))),
        child: SizedBox(
          height: itemHeight,
          child: Column(
            children: [
              Expanded(
                flex: 0,
                child: ElementTitleWidget(
                  elementModel: uiElementModel,
                ),
              ),
              //Flexible 和 Expanded 类似都是盒子布局，但是多个了属性fit 是否占满整个盒子
              Flexible(
                //Flexible
                child: ListView.separated(
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  padding: EdgeInsets.only(left: 15.w, right: 15.w),
                  itemBuilder: (context, index) {
                    final model = creatives[index];
                    return FrameSeparateWidget(
                      index: index,
                      placeHolder: SizedBox(
                        width: 109.w,
                        height: 109.h,
                      ),
                      child: Bounce(
                        onPressed: () {
                          logger.i("被点击了");
                          //RouteUtils.routeFromActionStr(model.action);
                        },
                        child: _buildItem(model, thme),
                      ),
                    );
                  },
                  separatorBuilder: (context, index) {
                    return Gaps.hGap9;
                  },
                  itemCount: creatives.length,
                ),
              ),
            ],
          ),
        ));
  }
}
